<template>
  <el-form label-width="120px">
    <el-form-item label="SPU名称">
      <el-input placeholder="spu名称" />
    </el-form-item>
    <el-form-item label="SPU品牌">
      <el-select placeholder="请选择">
        <el-option :label="c1.tmName" value="c1.id" v-for="c1 in AllTrademarkList" :key="c1.id" />

      </el-select>
    </el-form-item>

    <el-form-item label="SPU描述">
      <el-input rows="4" type="textarea" />
    </el-form-item>

    <el-form-item label="SPU图片">
      <el-upload :action="`${BASE_URL}/admin/product/upload`" list-type="picture-card" :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-select placeholder="还有几项未选择">
        <el-option :label="c2.name" value="c2,id" v-for="c2 in SaleAttrList " :key="c2.id" />

      </el-select>
      <el-button type="primary" :icon="Plus">添加销售属性</el-button>
      <el-table border style="width: 100%;margin:20px 0">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="name" label="属性名" width="180" />
        <el-table-column prop="address" label="属性值列表" />
        <el-table-column prop="address" label="操作">
          <el-button type="danger" :icon="Delete"></el-button>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>

  </el-form>
</template>

<script lang="ts">
export default {
  name: 'SpuForm'
}
</script>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { ref } from 'vue'
import { Plus, Delete, } from '@element-plus/icons-vue'
import { reqAllTrademarkData, reqSaleAttrData } from "@/api/product/spu"
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//定义一个Spu的对象数据
const SpuInfo = reactive({
  description: '',//spu描述
  spuName: "",//spu名称
  tmId: "",//spu品牌
  category3Id: 0,
  spuImageList: [],//存储图片连接地址的数组
  spuSaleAttrList: []//属性值数组
})
//定义全部品牌的数据
const AllTrademarkList = ref([]);
//定义销售属性
const SaleAttrList = ref([])
//定义提交图片的前缀
const BASE_URL = import.meta.env.VITE_API_URL
//4移除图片，在我的所收集的数据中移除我所不要的数据
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFiles, uploadFile)
  SpuInfo.spuImageList = uploadFiles.map(item => {
    return {
      imageName: item.name,
      imgUrl: item.response.data
    }



  })

}
//5预览图片
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const onSubmit = () => {
  console.log('submit!')
}
//1组件一挂载就请求数据品牌与销售属性
onMounted(async () => {
  try {

    const [responseAllTrademarkList, responseSaleAttrList] = await Promise.all([reqAllTrademarkData(), reqSaleAttrData()])
    //给全部的品牌数据与销售属性赋值
    AllTrademarkList.value = responseAllTrademarkList;
    SaleAttrList.value = responseSaleAttrList;
  } catch (error) {
    ElMessage.info('请求失败了哈哈开心')
  }
})

// 2图片上传成功后触发的函数成功之后将数据的连接存入到spuImageList
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log(response, uploadFile)

  SpuInfo.spuImageList.push({

    imageName: uploadFile.name,
    imgUrl: response.data

  })

}
//3图片上传之前要验证图片的格式与大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  const imgTypes = ['image/jpeg', 'imgage/jpg', 'imgage/gif']
  if (!imgTypes.includes(rawFile.type)) {
    ElMessage.error('请添加正确格式的图片!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片的大小不能超过2mb')
    return false
  }
  return true
}
</script>

<style lang="scss" scoped>

</style>